<template>
  <div class="menu-wrapper"><!--v-if="nav.title"-->
    <!-- 一级菜单 -->
    <el-menu-item
        v-if="nav.children.length === 0"
        :index="nav.path"
    >
      <template #title>
        <el-icon>
          <component :is="nav.meta.icon"></component>
        </el-icon>
        <span>{{ nav.meta.title }}</span>
      </template>
    </el-menu-item>
    <!-- 二级菜单 -->
    <el-sub-menu v-if="nav.children.length > 0" :index="nav.path" :unique-opened="true">
      <template #title>
        <el-icon>
          <component :is="nav.icon"></component>
        </el-icon>
        <span>{{ nav.title }}</span>
      </template>
      <!-- 子菜单 -->
      <div v-for="child in nav.children" :key="child.path">
        <SidebarItem
            v-if="child.children && child.children.length"
            :key="child.path"
            :index="child.path"
            :is-nest="true"
            :item="child"
            class="nest-menu"/>
        <el-menu-item v-else :index="child.path">
          <template #title>
            <el-icon>
              <component :is="child.meta.icon"></component>
            </el-icon>
            <span>{{ child.meta.title }}</span>
          </template>
        </el-menu-item>
      </div>
    </el-sub-menu>
  </div>
</template>

<script lang="ts" setup>
import { toRefs} from 'vue'

const props = defineProps({
  nav: {
    type: Object,
    required: true,
    default: () => {
      return {title: ""}
    }

  }
})
toRefs(props)
</script>
